<!-- 
 @Author: LW  
 @Date: 2021-01-08 11:30:38  
 @function: 部门编辑框
 -->
<template>
  <div>
       <el-card class="box-card card1">
    
      <div class="searchBox">
        <el-form :inline="true">
          <el-form-item label="关键字：">
            <el-input v-model="keyword" placeholder="请输入关键字" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="loadLeaderListInfo()">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- ref相当于Id:model是表单内容-->
    <el-form label-width="120px" :model="formInfo">
         <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            ref="multipleTable"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 99%"
            :height="tableHeight"
            @selection-change="checkSelect"
            @row-click="handleRowClick"
          >
            <el-table-column align="center" type="selection"  class="checkbox-inp" width="55"></el-table-column>
            <el-table-column align="center" prop="name" label="用户名称" width="160"></el-table-column>
            <el-table-column align="center" prop="realname" label="真实名称" width="180"></el-table-column>
            <el-table-column align="center" prop="gender" label="性别" width="80"></el-table-column>
            <el-table-column align="center" prop="mobile_phone" label="联系电话" width="180"></el-table-column>
          </el-table>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submitForm()">保存</el-button>
    </div>
  </div>
</template>
<script>
import DepartmentHttp from "@/api/authority/department"; //http
//定义变量
const {
    loadLeaderListInfo,//获取用户列表
    saveLeaderInfo,//保存包含的用户数据
} = DepartmentHttp;

export default {
  props: ["formInfo"], //父界面v-bind:editInfo一致
  components: {},
  data() {
    return {
      loading: false,//是显示加载
      tableHeight: window.innerHeight * 0.6, //表格高度
      listData: [], //表格返回信息
      multipleSelection: null,//复选框
      keyword:"",//关键字
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
      //获取用户列表
      this.loadLeaderListInfo();
  },
  methods: {
    //点击复选框触发，复选框样式的改变
    checkSelect(val) {
      this.multipleSelection = val;
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取数据方法
    loadLeaderListInfo() {
      let self = this;
      this.loading = true;
      let par ={
         departmentid:this.formInfo.id,
         keyword:this.keyword
      };
      loadLeaderListInfo(par).then(response => {
        let data = response.data;
        this.listData = data.Data;
        this.$nextTick(() => {
            self.listData.forEach(element => {
                if (element.lay_is_checked) {
                     self.$refs.multipleTable.toggleRowSelection(element);
                }
            });
        });
        this.loading = false;
      });
    },
    //保存信息
    submitForm() {
      let self = this;
      let parametersList=[];
      this.multipleSelection.forEach(element => {
          parametersList.push(element.id);
      });
      let par = {
        idList: parametersList,
        department_id: this.formInfo.id
      };
      saveLeaderInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.$messageTip.success(data.Msg);
          self.$emit("callBack", null);
        } else {
          self.$messageTip.warning(data.Msg); 
        }
      });

    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  }
};
</script>